<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--相对定位
属性：position
值：relative-->
<style>
    p.r{
        position: relative;
        left: 150px;
        top: 50px;
    }

</style>

<p >正常文字1</p>
<p >正常文字2</p>
<p class="r" >相对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>

<!--练习-相对定位，但是又不占用位置-->
<style>
    .d{
        position: relative;
    }
    .p{
        position: absolute;
        left: 150px;
        top: 50px;
    }
</style>

<div class="d">
    <p >正常文字1</p>
    <p >正常文字2</p>
    <p class="p" >相对定位的文字3(不占坑)</p>
    <p >正常文字4</p>
    <p >正常文字5</p> 
</div>

</body>
</html>